<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册</title>
    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css"/>
    <link rel="stylesheet" type="text/css" href="css/register.css"/>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/jquery.cookie.js"></script>
</head>
<body>
<div class="container" id="register_out">
    <div class="row">
        <div class="col-xs-3 col-sm-3 col-md-3 col-lg-3"></div>
        <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="register">
            <div class="row">
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="register_left"><img src="images/login/login_left_logo.png"></div>
                <div class="col-xs-6 col-sm-6 col-md-6 col-lg-6" id="register_right">
                    <div id="register_right_title">用户注册</div>
                    <input class="user_password" id="telephone" type="text" autocomplete="off" placeholder="请输入您的手机号码">
                    <input class="user_password" id="password" type="password" autocomplete="off" placeholder="请输入密码">
                    <input class="checkCode" id="phoneCode" type="text" autocomplete="off" placeholder="请输入验证码"><img src="/FVOnline/checkCode/getCode" id="abcd">
                    <div><button id="register_submit">注册并登录</button></div>
                    <div id="goto_login"><p>已有账号？前往<a href="login.html">登录</a></p></div>
                </div>
            </div>
        </div>
    </div>
</div>

<script type="text/javascript">

    $("#abcd").click(function () {
        this.src = "/FVOnline/checkCode/getCode?" +new Date().getTime();
    });


    $("#telephone").blur(function () {

        var telephone_reg = /^1[3-9]\d{9}$/;

        var telephone = $("#telephone").val();

        var flag = telephone_reg.test(telephone);

        if (!flag){
            $("#telephone").addClass("error_input");
        }

    });

    $("#telephone").focus(function () {

        $("#telephone").removeClass("error_input");

    });

    $("#password").blur(function () {

        var password_reg = /^[A-Za-z\d!"#$%&'()*+,-.<=>?@[\]^_`{|}~]{6,16}$/;

        var password = $("#password").val();

        var flag = password_reg.test(password);

        if (!flag){
            $("#password").addClass("error_input");
        }

    });

    $("#password").focus(function () {

        $("#password").removeClass("error_input");

    });


    $("#phoneCode").blur(function () {

        var phoneCheckCode_reg = /^([a-zA-Z]{4})$/;

        var phoneCode = $("#phoneCode").val();

        var flag = phoneCheckCode_reg.test(phoneCode);

        if (!flag){
            $("#phoneCode").addClass("error_input");
        }

    });

    $("#phoneCode").focus(function () {
        $("#phoneCode").removeClass("error_input");
    });


    $("#sendCode").click(function () {
        if (isNormalInput($("#telephone"))) {
            var telephone = $("#telephone").val();
            $.get("checkCode/getPhoneCode",{telephone:telephone},function (data) {});
            setSendCodeTime(60);
        }else {
            if (!$("#telephone").hasClass("error_input")){
                $("#telephone").addClass("error_input");
            }
        }
    });

    function setSendCodeTime(time) {
        if (time == 0){
            $("#sendCode").removeAttr("disabled");
            $("#sendCode").html("发送验证码");
            return false;
        }else {
            $("#sendCode").attr("disabled",true);
            $("#sendCode").html(time + "S重新发送");
            time--;
        }
        setTimeout(function() {
            setSendCodeTime(time);
        },1000);
    }

    function isNormalInput(ipt){
        return ipt.val() != null && ipt.val().length != 0 && !ipt.hasClass("error_input");
    }

    $("#register_submit").click(function () {
        if (isNormalInput($("#telephone")) && isNormalInput($("#password")) && isNormalInput($("#phoneCode"))) {

            var telephone = $("#telephone").val();
            var password = $("#password").val();
            var phoneCode = $("#phoneCode").val();

            var code = $.cookie("checkcode");

            if (phoneCode.toLowerCase() == code.toLowerCase()){
                $.post("user/register",{telephone:telephone,password:password,phoneCode:phoneCode},function (data) {

                    var json = JSON.parse(data);
                    if(json.code.toLowerCase() == "success"){
                        location.href = "index.html";
                    }else if(json.code.toLowerCase() == "error"){
                        if (json.message == "验证码错误"){
                            $("#phoneCode").addClass("error_input");
                        }else if(json.message == "手机号码已被注册"){
                            $("#telephone").addClass("error_input");
                            alert("手机号码已被注册");
                        }
                    }else {
                        alert("未知错误!");
                    }
                });
            }else {
                alert("验证码错误");
            }



        }else {
            if (!isNormalInput($("#telephone"))){
                if (!$("#telephone").hasClass("error_input")){
                    $("#telephone").addClass("error_input");
                }
            }
            if (!isNormalInput($("#password"))){
                if (!$("#password").hasClass("error_input")){
                    $("#password").addClass("error_input");
                }
            }
            if (!isNormalInput($("#phoneCode"))) {
                if (!$("#phoneCode").hasClass("error_input")){
                    $("#phoneCode").addClass("error_input");
                }
            }
        }

    });

</script>
</body>
</html>